<!DOCTYPE html>
<html lang='en'>
<head>
<title>Simulation webAPI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/layout.css" rel="stylesheet" type="text/css"></link>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript type='text/javascript' src='static/lib/jquery-3.5.1.min.js'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="static/simulator.js"></script>

</head>
<body>

<main id='main_content'>
    <div class='wrap'>
        <div class='content'>
            <h1>Substation circuit simulator</h1>
            <!--<a href="/init?scd=../open_substation.scd" class="controlBtn" >init</a>-->
            <a href="/circuit"  class="controlBtn" disabled>circuit</a>
            <a href="#" id="enable_settings"  class="controlBtn" disabled>settings</a>
            <a href="#" id="modify_nodes" class="controlBtn" disabled>modify</a>            
            <a href="/play_simulation?delay=0.001&step=10" id="run" class="controlBtn" disabled>play</a>
            <a href="/clear_plot" class="controlBtn" disabled>clear</a>
            <a href="/reinit" class="controlBtn">re-init</a>            
            <br><br><br>
            <a href="/plot_simulation?plot=1" class="controlBtn" disabled>plot current</a>
            <a href="/plot_simulation?plot=2" class="controlBtn" disabled>plot voltage</a>
	    <br><br><br>
            <!--<a href="/simulation_settings"  class="controlBtn">settings</a><br>-->

            <form id="simulation_settings" action="/simulation_settings" method="post" style="display:none">Settings<br>
                <input type="text" id="title" name="title" value="substation" class="controlInput"><br>
                <input type="text" id="options" name="options" value="#" class="controlInput"><br>
                <input type="text" id="tran" name="tran" value="" class="controlInput"><br>
                <input type="submit" value="update"  class="controlBtn">
            </form><br>
            
            <!--<a href="/simulation_node?node=@r.xs12_e1_w1_bb1_load.r1[r]" >get simulation_node?node=[node ref]</a><br>-->
            <form id="simulation_node" action="/simulation_node" method="post" style="display:none">Modify a node<br>
                <div class="dropdown">
                    <input type="text" name="node" id="node" class="controlInput" value="--select a node--">
                    <select id="nodes">
                        <option>--- select a node---</option>
                    </select>
                </div>
                <br>
                <input type="text" id="value" name="value" value="" class="controlInput"><br>
                <input type="submit" value="modify" class="controlBtn">
            </form><br><br>

            <img id="plot" alt=""></img>
            <!--<a href="/run_simulation?steps=200&step=10" >run_simulation?steps=[iterations]&step=[steps per iteration]</a><br>-->
            <h2>status:</h2>
            <div id="container" style="font-size: 16px; font-weight: bold;"></div><br><br>
            
        </div>
    </div>
</main>
</body>
</html>

